<template>
  <div>
    <el-descriptions direction="vertical" :column="3" border>
      <el-descriptions-item label="产品名称" span="3">
        {{ productInfo.goodsName }}
      </el-descriptions-item>
      <el-descriptions-item label="产品编号">{{
        productInfo.goodsCode
      }}</el-descriptions-item>
      <el-descriptions-item label="产品类别">
        <el-tag size="small">{{ productInfo.productCategoryName }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="产品价格">
        {{ productInfo.goodsPrice }}
      </el-descriptions-item>
      <el-descriptions-item label="产品总数">
        {{ productInfo.productTotal }}</el-descriptions-item
      >
      <el-descriptions-item label="产品销量">
        {{ productInfo.productSales }}</el-descriptions-item
      >
      <el-descriptions-item label="排序">
        {{ productInfo.productSort }}</el-descriptions-item
      >
      <el-descriptions-item label="商品图片" span="3">
        <div
          v-if="productInfo.picPath && productInfo.picPath.length"
          class="imglist-wrapper"
        >
          <el-card
            v-for="(item, index) in productInfo.picPath"
            :key="index"
            style="width: 90px; height: 90px; margin: 5px"
          >
            <el-image
              :src="item"
              :preview-src-list="productInfo.picPath"
              fit="cover"
              style="width: 100%"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </el-card>
        </div>
        <div v-else>
          <el-empty :image-size="30" description="暂无图片"></el-empty>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="商品规格明细" span="3">
        <ul class="specificationList-wrap">
          <li v-for="(item, idx) in specificationList" :key="idx">
            <span class="tag-title">{{ item.name }}：</span>
            <el-tag
              v-for="(tag, index2) in item.values"
              :key="index2"
              size="small"
            >
              {{ tag }}
            </el-tag>
          </li>
        </ul>

        <el-table
          ref="AdduceTableTableRef"
          :data="tableContentData"
          border="border"
          stripe
          size="medium"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column
            v-for="item in tableHeadData"
            :key="item.prop"
            :prop="item.prop"
            align="center"
            show-overflow-tooltip
            :label="item.name"
          >
            <template slot-scope="scope">
              <div v-if="item.prop === 'picPath'">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row[item.prop]"
                  :preview-src-list="[scope.row[item.prop]]"
                >
                </el-image>
              </div>
              <div v-else>
                <span>{{ scope.row[item.prop] }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-descriptions-item>
      <el-descriptions-item label="规格详情" span="3">
        <div v-html="productInfo.detailHtml"></div>
      </el-descriptions-item>
      <el-descriptions-item label="产品内容" span="3">
        产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { getGoods } from "@/api/goodsManage/goods";
export default {
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  components: {},
  data() {
    return {
      productInfo: {},
      specificationList: [],
      tableContentData: [],
      tableHeadData: [],
    };
  },

  computed: {},

  mounted() {
    this.$nextTick(() => {
      if (this.id) {
        this.getGoodsInfo(this.id);
      }
    });
  },

  methods: {
    // 获取商品详情
    getGoodsInfo(id) {
      getGoods(id).then((response) => {
        let info = response.data;
        console.log(info);

        info.picPath = info.picPath ? info.picPath.split(",") : [];

        let attrList = info.attrList;
        let attrKey = [];
        this.specificationList = [];

        if (attrList.length) {
          attrList.forEach((item, index) => {
            attrKey[item.attrName] = "attr" + index;
            let obj = {
              name: item.attrName,
              prop: "attr" + index,
              value: "",
              visible: false,
              values: item.attrValue ? item.attrValue.split(",") : [],
            };
            this.specificationList.push(obj);
          });
        }

        let skuList = info.skuList;
        skuList.forEach((sku) => {
          let skuAttrData = JSON.parse(sku.goodsAttrs);
          let obj = { ...sku };
          skuAttrData.forEach((attr) => {
            for (var key in attr) {
              obj[attrKey[key]] = attr[key];
            }
          });
          this.tableContentData.push(obj);
        });
        console.log(this.specificationList);
        console.log(this.tableContentData);
        this.generateTableHead();
        this.productInfo = info;
      });
    },

    // 表格中默认 列
    staticData() {
      return [
        {
          name: "价格(元)",
          prop: "goodsPrice",
          value: "",
          require: true,
        },
        {
          name: "库存",
          prop: "goodsCount",
          value: "",
          require: true,
        },
        {
          name: "封面图",
          prop: "picPath",
          value: "",
          require: true,
        },
      ];
    },

    // 生成表头
    generateTableHead() {
      this.tableHeadData = [];
      this.specificationList.forEach((item) => {
        if (item.values.length) {
          this.tableHeadData.push({
            name: item.name,
            prop: item.prop,
          });
        }
      });
      this.tableHeadData.push(...this.staticData().map((item) => item));
    },
  },
};
</script>
<style scoped>
.imglist-wrapper {
  display: flex;
}

>>> .imglist-wrapper .el-card__body {
  padding: 5px;
  display: flex;
  height: 100%;
}

ul,
li {
  margin: 0;
  padding: 0;
}
.specificationList-wrap li {
  margin-bottom: 15px;
}
.specificationList-wrap li:last-child {
  margin-bottom: 0;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin: 0 10px;
  vertical-align: bottom;
}
.tag-title {
  font-size: 16px;
  font-weight: bold;
  width: 150px;
  margin-right: 10px;
}
</style>
